import React from 'react';
import { View, Image, Text, router, hideMenuButton, ScrollView } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';
import { useSelector, useDispatch } from 'react-redux';
import { NavBar, Switch, Loading, SwipeCell } from '@ray-js/smart-ui';
import styles from './index.module.less';
import { selectSystemInfoByKey } from '@/redux/modules/systemInfoSlice';
import { weekTextShowHandle, showToastHandle, getDevId, isAllZeros, toTwoHex, hexToDecimal, hexToDecimalTwo } from '@/utils';
import Strings from '@/i18n';
import { TopBar, IconFont } from '@/components';
import { alarm, ic_more } from '@/res/index'




function Timer() {
  hideMenuButton()
  const dispatch = useDispatch();
  const actions = useActions();
  const statusBarHeight = useSelector(selectSystemInfoByKey('statusBarHeight'));

  const [loading, setLoading] = React.useState(false);

  let timer_1 = useProps(props => props.timer_1)
  let timer_2 = useProps(props => props.timer_2)
  const timer_3 = useProps(props => props.timer_3)
  const timer_4 = useProps(props => props.timer_4)
  const timer_5 = useProps(props => props.timer_5)
  //  if (!timer_1) {
  //   timer_1="017f0000093b000a0200";
  //  }
  //  if (!timer_2) {
  //   timer_2="013e0a2b0d320005000a"; 
  //  }
  const timerArr = [timer_1, timer_2, timer_3, timer_4, timer_5].filter(item => item && item !== "0000000000")
  console.log("timerArr", timerArr);



  const onSwitch = (e, item) => {
    console.log("item", item)
    console.log(e.detail)
    actions[`timer_${parseInt(item.slice(0, 2), 16) + 1}`].set(item.slice(0, 19) + (e.detail ? "1" : "0"))
  }
  //delete
  const deleteHandle = (index, item) => {
    setLoading(true)
    actions[`timer_${index + 1}`].set('0'.repeat(20))
    setTimeout(() => {
      setLoading(false)
    }, 1000)
  }


  function formatRunTime(m, s) {
    if(m==0){
      return parseInt(s) + Strings.getLang("str_second_unit")
    }else{
      return m + Strings.getLang("str_minute_unit") + s + Strings.getLang("str_second_unit")
    }
   
  }
  function formatPauseTime(m, s) {
    if(m==0){
      return parseInt(s) + Strings.getLang("str_second_unit")
    }else{
      return m + Strings.getLang("str_minute_unit") + s + Strings.getLang("str_second_unit")
    }

  }




  return (
    <View className={styles.view}>
      <TopBar title={Strings.getLang("str_mode")}></TopBar>
      <View className={styles.bgView}>
        <Image className={styles.bgimage} src={alarm} />
        <View className={styles.bgDesc}>  {Strings.getLang("str_add_desc")}</View>
      </View>


      <View className={styles.list}>

        <View className={styles.addTimer} onClick={() => { router.push('/addTimer/0/0') }} >
          {Strings.getLang("str_add_timer")}
        </View>
        <ScrollView   className={styles.srcoll}  scrollY > 
          {
            timerArr && timerArr.map((item, index) => {
              if (isAllZeros(item)) {
                return
              }

              return (
                <SwipeCell
                  key={index}
                  className={styles.swipeout}
                  rightWidth={65}
                  slot={{
                    right: <View style={{
                      color: '#fff',
                      backgroundColor: 'red',
                      marginLeft: '5px',
                      width: '60px',
                      height: '240rpx',
                      display: 'flex',
                      justifyContent: 'center',
                      borderRadius: '10px',
                      alignItems: 'center',
                    }}
                      onClick={() => { deleteHandle(index, item) }}
                    >{Strings.getLang("str_delete")}</View>,
                  }}
                >
                  <View className={styles.block} key={index} onClick={() => { { router.push(`/addTimer/${index}/${item}`) } }}>
                    <View className={styles.blockLeft} style={{ color: "#C2C2C2" }}>
                      <View className={styles.fontOne}>{hexToDecimal(item.slice(4, 6))}:{hexToDecimalTwo(item.slice(6, 8))}-{hexToDecimal(item.slice(8, 10))}:{hexToDecimalTwo(item.slice(10, 12))}</View>
                      <View className={styles.fontTwo}>{Strings.getLang("str_run")}{formatRunTime(hexToDecimal(item.slice(12, 14)), hexToDecimalTwo(item.slice(14, 16)))}
                        {" | " + Strings.getLang("str_pause")}{formatPauseTime(hexToDecimal(item.slice(16, 18)), hexToDecimalTwo(item.slice(18, 20)))}</View>
                      <View className={styles.fontTwo}>{weekTextShowHandle(parseInt(item.slice(2, 4), 16).toString(2).padStart(7, '0'))}</View>
                    </View>

                    <Image mode='aspectFit' style={{ width: '40rpx', height: '40rpx', marginLeft: '10rpx' }} src={ic_more} />
                    {/* <Switch disabled={false} checked={item.slice(0, 2) === '00' ? false : true} onChange={e => { onSwitch(e, item) }}
                  /> */}


                  </View>
                </SwipeCell>
              )
            })
          }
        </ScrollView>
      </View>
      <View className={styles.Loading} style={{ display: `${loading ? 'flex' : "none"}` }}>
        <Loading size="60px" type='spinner' />
      </View>
    </View>
  );
}

export default Timer;
